<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes"/>
        </f:facet>
        <h:outputStylesheet library="css" name="main.css"/>
        <h:outputScript library="js" name="main.js"/>
        <ui:insert name="head">
            <title>云驼科技</title>
        </ui:insert>
    </h:head>
    <h:body>
        <ui:insert name="menu">
        </ui:insert>

        <h:form id="form" class="mainfm">
            <ui:insert name="form"/>
            <h2>商铺仓库设置</h2>
            <p:separator /> 
            <p:growl id="growl" showDetail="true" sticky="true" keepAlive="1"/>  
            <p:layout style="min-width:400px;min-height:600px;">
                <p:layoutUnit position="north" size="45">
                    <p:outputLabel value="#{dataTableLazy.test}"></p:outputLabel>
                    
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    
                    <p:dataTable var="car" value="#{dataTableLazy.lazyModel}" paginator="true" rows="10"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{dataTableLazy.selectedCar}" id="carTable" lazy="true">
                    <!--<p:ajax event="rowSelect" listener="#{dataTableLazy.onRowSelect}" update=":form:carDetail" oncomplete="PF('carDialog').show()" />-->
                    <p:column headerText="Id" sortBy="#{car.randomId}" filterBy="#{car.randomId}">
                        <h:outputText value="#{car.randomId}" />
                    </p:column>
                    <p:column headerText="Year" sortBy="#{car.randomYear}" filterBy="#{car.randomYear}">
                        <h:outputText value="#{car.randomYear}" />
                    </p:column>
                    <p:column headerText="Brand" sortBy="#{car.randomBrand}" filterBy="#{car.randomBrand}">
                        <h:outputText value="#{car.randomBrand}" />
                    </p:column>
                    <p:column headerText="Color" sortBy="#{car.randomColor}" filterBy="#{car.randomColor}">
                        <h:outputText value="#{car.randomColor}" />
                    </p:column>
                </p:dataTable>
                </p:layoutUnit>
            </p:layout>
             <p:dialog header="Car Detail" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                <p:outputPanel id="carDetail" style="text-align:center;">
                     <p:panelGrid  columns="2" rendered="#{not empty dataTableLazy.selectedCar}" columnClasses="label,value">
                        <f:facet name="header">
                        </f:facet>

                        <h:outputText value="Id:" />
                        <h:outputText value="#{dataTableLazy.selectedCar.randomColor}" />

                        <h:outputText value="Year" />
                        <h:outputText value="#{dataTableLazy.selectedCar.randomYear}" />

                        <h:outputText value="Color:" />
                        <h:outputText value="#{dataTableLazy.selectedCar.randomColor}" style="color:#{dataTableLazy.selectedCar.randomColor}"/>

                        <h:outputText value="Price:" />
                        <h:outputText value="#{dataTableLazy.selectedCar.randomPrice}">
                            <f:convertNumber type="currency" currencySymbol="$" />
                        </h:outputText>
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>
            <ui:insert name="growl">
                <p:growl globalOnly="true" showDetail="true" sticky="true">
                    <p:autoUpdate/>
                </p:growl>
            </ui:insert>
            <!-- 禁用掉输入框默认的回车提交事件 -->
            <p:commandButton id="my_dftCmdBtn" type="button" style="position: fixed;bottom: 0;right: 0;visibility: hidden;"/>
            <p:defaultCommand target="my_dftCmdBtn"/>
        </h:form>

        <ui:insert name="outer"/>
        <p:tooltip position="left"/>
        <p:confirmDialog id="cfmDlg" styleClass="cfmDlg" global="true" closeOnEscape="true" header="确认框" responsive="true">
            <p:commandButton value="确定" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandButton value="取消" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:confirmDialog>
    </h:body>
</html>
